import React, { useEffect } from "react";
import { Button, NavBar } from "antd-mobile";
import { useClub } from "../../../context/ClubContext";
import { useNavigate } from "react-router-dom";
import $fetch from "../../../utils/app/$fetch";
import "./style.scss";
import moment from "moment";

const SuccessPage = () => {
  const { state, dispatch }: any = useClub();
  const navigate = useNavigate();
  useEffect(() => {
    queryClub();
  }, []);

  const queryClub = async () => {
    try {
      const res: any = await $fetch("/star/member");
      if (res) {
        dispatch({
          status: "yes",
          currentStep: -1,
          memberTime: res?.memberTime,
          memberName: res?.memberName,
          expireTime: res?.expireTime,
          memberAvatar: res?.memberAvatar,
        });
      }
    } catch (error) {
      console.log(error, "______error");
    }
  };
  return (
    <div className="container_success">
      <NavBar
        style={{
          "--border-bottom": "1px #eee solid",
        }}
        onBack={() => {
            navigate("/club/join");
        }}
      >
        支付成功
      </NavBar>
      <div className="content_wraper">
        <img
          className="item_img"
          src={require("../../../asset/imgs/success.png")}
        ></img>
        <div className="success">支付成功</div>
        <div className="item_tip">
          恭喜你加入starship官方粉丝俱乐部，您的会籍有效期至{moment(state?.expireTime).format("YYYY年MM月DD日")}，请留意您的有效期并在到期前30天内完成续费
        </div>
        <Button onClick={() => navigate("/club/join")}>返回</Button>
      </div>
    </div>
  );
};

export default SuccessPage;
